<!--全国状态展示-->
<template>
  <div class="container">
    <!--页面标题-->
<!--    <el-card style="position: fixed;height: 80px;width: 88%;overflow-y: hidden;overflow-x:hidden;top: 0;left: 12%; background-image: linear-gradient(#d6d6d6, #ffffff,#ffffff,#ffffff);text-align: left;z-index: 999">
      <h2 style="margin-top: -10px">全国车辆管理系统</h2>
      <el-breadcrumb separator="-" style="margin-top: -10px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">状态信息</a></el-breadcrumb-item>
        <el-breadcrumb-item>全国状态信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>-->
    <Header :position="position"></Header>
      <div class="bodyDiv">
        <!--中国地图-->
        <chinese-map style="width: 66%;"></chinese-map>
        <!--详细数据-->
        <el-card style=" width: 37%;margin-left: 10px; background-color:#ffffff">
          <el-tabs v-model="tabData" @tab-click="handleClick">
            <el-tab-pane label="故障设备" name="guzhang">
              <div style="white-space: nowrap; display: flex;width: 100%">
                <el-select placeholder="设备种类" style="margin: 5px;width: 50%"></el-select>
                <el-select placeholder="设备类型" style="margin: 5px;width: 50%"></el-select>
              </div>
              <div style="white-space: nowrap;display: flex;width: 100%">
                <el-select placeholder="设备编号" style="margin: 5px;width: 50%"></el-select>
                <el-select placeholder="所在区域" style="margin: 5px;width: 50%"></el-select>
              </div>

              <el-table :data="tableData" stripe style="height: 40%; overflow-y: auto">
                <el-table-column label="设备种类" prop="class">

                </el-table-column>
                <el-table-column label="设备类型" prop="type">

                </el-table-column>
                <el-table-column label="设备编号" prop="id">

                </el-table-column>
                <el-table-column label="所在区域" prop="factory">

                </el-table-column>
              </el-table>
              <el-pagination style="margin-top: 5px"></el-pagination>

              <h3 style="margin-top: 40px">未处理风机故障信息</h3>
              <el-table :data="tableData" stripe style="height: 40%; overflow-y: auto">
                <el-table-column label="设备种类" prop="class">

                </el-table-column>
                <el-table-column label="设备类型" prop="type">

                </el-table-column>
                <el-table-column label="设备编号" prop="id">

                </el-table-column>
                <el-table-column label="所在区域" prop="factory">

                </el-table-column>
                <el-table-column label="位置" prop="pos">

                </el-table-column>
                <el-table-column label="等级" prop="level">

                </el-table-column>
              </el-table>
              <el-pagination style="margin-top: 5px"></el-pagination>

            </el-tab-pane>
            <el-tab-pane label="在线车辆" name="zaixian">
              <h3 style="margin-top: 30px">在线设备信息</h3>
              <el-table :data="tableData" stripe style="height: 40%">
                <el-table-column label="设备种类" prop="class">

                </el-table-column>
                <el-table-column label="设备类型" prop="type">

                </el-table-column>
                <el-table-column label="设备编号" prop="id">

                </el-table-column>
                <el-table-column label="所在区域" prop="factory">

                </el-table-column>
              </el-table>
              <el-pagination style="margin-top: 5px"></el-pagination>
              <h3 style="margin-top: 40px">在线机型统计</h3>
              <annual-pie style="margin-top: 10px;width: 100%;height: 300px" v-if="tabData==='zaixian'"></annual-pie>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
  </div>
</template>

<script>
    import ChineseMap from "../../components/charts/ChineseMap";
    import AnnualPie from "../../components/charts/AnnualPie";
    import Header from "../../components/Header";
    export default {
      name: "NationWideStatus",
      components: {Header, AnnualPie, ChineseMap},
      data(){
        return{
          position:{
            secondTitle:'状态信息' ,
            thirdTitle:'全国车辆状态信息'
          },
          tabData:'guzhang',
          tableData: [{
            class: '双馈',
            type: '5mw空水冷',
            id:'10120001',
            factory:'东北区域',
            pos:'转子',
            level:'五级'
          }, {
            class: '笼型',
            type: '鼠笼异步',
            id:'32121001',
            factory:'北方区域',
            pos:'转子',
            level:'五级'
          }, {
            class: '永磁',
            type: '永磁直驱',
            id:'22102001',
            factory:'西北区域',
            pos:'转子',
            level:'五级'
          },{
            class: '永磁',
            type: '7MW直驱',
            id:'22102002',
            factory:'西北区域',
            pos:'转子',
            level:'五级'
          }]
        }
      },
      methods:{
        handleClick(){
          console.log(this.tabData)
        }
      },
    }
</script>

<style scoped>
  .container {
    display: flex;
    text-align: left;
  }
  .bodyDiv{
    width: 100%;
    display: flex;
    height: 875px
/*    background-color: #f0f0f0;*/
  }

</style>
